<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台首页 - 睿途教育</title>
    <link href="../assets/css/tailwind.css" rel="stylesheet">
    <link href="../assets/css/font-awesome.min.css" rel="stylesheet">
    <script src="../assets/js/chart.umd.min.js"></script>
    
    <!-- 
    ============================================
    ⚠️ 原始页面工具类 - 不允许删除 ⚠️
    ============================================
    此工具类已合并到公共配置文件 src/input.css 中
    保留此注释作为配置历史记录和参考
    ============================================
    -->
    <style type="text/tailwindcss">
        @layer utilities {
            .card-hover {
                @apply transition-all duration-300 hover:shadow-md hover:-translate-y-1;
            }
            .stat-card {
                @apply bg-white rounded-lg shadow-sm p-5 card-hover;
            }
            .progress-bar {
                @apply h-2 rounded-full bg-gray-200 overflow-hidden;
            }
            .progress-value {
                @apply h-full rounded-full transition-all duration-1000 ease-out;
            }
        }
    </style>
</head>

<body class="bg-gray-100 font-sans text-gray-800">
    <div class="min-h-screen flex flex-col">
        <!-- 顶部导航栏 -->
        <header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300">
            <div class="container mx-auto px-0 py-3 flex items-center justify-between">
                <div class="flex items-center space-x-2">
                    <button id="sidebar-toggle" class="lg:hidden text-gray-500 hover:text-primary transition-colors">
                        <i class="fa fa-bars text-xl"></i>
                    </button>
                    <h1 class="text-xl font-bold text-primary flex items-center">
                        <i class="fa fa-book mr-2"></i>
                        <span>睿途教育</span>
                    </h1>
                </div>

                <div class="hidden md:flex items-center space-x-6">
                    <!-- 控制面板 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 font-medium border-b-2 border-primary pb-1 flex items-center">
                            <i class="fa fa-tachometer mr-1"></i> 控制面板
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#" class="block px-4 py-2 text-sm text-primary bg-primary/10 font-medium">
                                    <i class="fa fa-dashboard mr-2"></i> 仪表盘
                                </a>
                                <a href="dashboard/data-overview.html"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-chart-line mr-2"></i> 数据概览
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-tasks mr-2"></i> 任务管理
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 教材管理 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                            <i class="fa fa-book mr-1"></i> 教材管理
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-list mr-2"></i> 版本管理
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-sitemap mr-2"></i> 章节管理
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-lightbulb-o mr-2"></i> 知识点管理
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-exchange mr-2"></i> 版本对比
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 题库管理 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                            <i class="fa fa-database mr-1"></i> 题库管理
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-question-circle mr-2"></i> 题目管理
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-tags mr-2"></i> 标签管理
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-filter mr-2"></i> 筛选规则
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-upload mr-2"></i> 批量导入
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 组卷系统 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                            <i class="fa fa-files-o mr-1"></i> 组卷系统
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-magic mr-2"></i> 智能组卷
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-edit mr-2"></i> 手动组卷
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-copy mr-2"></i> 试卷模板
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-history mr-2"></i> 历史试卷
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 数据分析 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                            <i class="fa fa-bar-chart mr-1"></i> 数据分析
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-chart-pie mr-2"></i> 学习分析
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-chart-bar mr-2"></i> 成绩统计
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-chart-line mr-2"></i> 趋势分析
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-file-text mr-2"></i> 报告生成
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 系统设置 -->
                    <div class="relative group">
                        <a href="#" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                            <i class="fa fa-cog mr-1"></i> 系统设置
                            <i class="fa fa-angle-down ml-1 text-xs"></i>
                        </a>
                        <div
                            class="absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                            <div class="py-2">
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-users mr-2"></i> 用户管理
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-shield mr-2"></i> 权限设置
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-database mr-2"></i> 数据备份
                                </a>
                                <a href="#"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-primary transition-colors">
                                    <i class="fa fa-cogs mr-2"></i> 系统配置
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="flex items-center space-x-4">
                    <div class="relative">
                        <input type="text" placeholder="搜索教材、章节或知识点..."
                            class="pl-10 pr-4 py-2 rounded-full bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all w-40 lg:w-64">
                        <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                    </div>

                    <div class="relative">
                        <button class="text-gray-500 hover:text-primary transition-colors">
                            <i class="fa fa-bell text-xl"></i>
                            <span
                                class="absolute -top-1 -right-1 bg-danger text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">3</span>
                        </button>
                    </div>

                    <div class="flex items-center space-x-2 cursor-pointer group">
                        <img src="https://picsum.photos/id/64/40/40" alt="用户头像"
                            class="w-8 h-8 rounded-full object-cover border-2 border-transparent group-hover:border-primary transition-all">
                        <span class="hidden md:inline font-medium">张老师</span>
                        <i class="fa fa-angle-down text-gray-400 group-hover:text-primary transition-colors"></i>
                    </div>
                </div>
            </div>
        </header>

        <!-- 主内容区 -->
        <main class="flex-1 container mx-auto px-4 py-6">
            <!-- 面包屑导航 -->
            <div class="flex items-center text-sm text-gray-500 mb-4">
                <a href="#" class="hover:text-primary">首页</a>
                <i class="fa fa-angle-right mx-2 text-gray-300"></i>
                <a href="#" class="hover:text-primary">控制面板</a>
                <i class="fa fa-angle-right mx-2 text-gray-300"></i>
                <span class="text-primary font-medium">仪表盘</span>
            </div>
            <!-- 页面标题 -->
            <div class="mb-6">
                <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800">数据概览</h2>
                <p class="text-gray-500 mt-1">查看系统关键指标和数据统计</p>
            </div>

            <!-- 数据统计卡片 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6" id="statistics-cards">
                <!-- 统计卡片将通过JavaScript动态加载 -->
            </div>

            <!-- 图表区域 -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
                <!-- 题目增长趋势 -->
                <div class="bg-white rounded-lg shadow-sm p-5 lg:col-span-2">
                    <div class="flex justify-between items-center mb-5">
                        <h3 class="font-semibold text-gray-800">题目增长趋势</h3>
                        <div class="flex space-x-2">
                            <button class="px-3 py-1 text-xs bg-primary text-white rounded-md">月度</button>
                            <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 hover:bg-gray-200 rounded-md transition-colors">季度</button>
                            <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 hover:bg-gray-200 rounded-md transition-colors">年度</button>
                        </div>
                    </div>
                    <div class="h-80">
                        <canvas id="questionGrowthChart"></canvas>
                    </div>
                </div>

                <!-- 题目类型分布 -->
                <div class="bg-white rounded-lg shadow-sm p-5">
                    <div class="flex justify-between items-center mb-5">
                        <h3 class="font-semibold text-gray-800">题目类型分布</h3>
                        <button class="text-gray-400 hover:text-primary">
                            <i class="fa fa-ellipsis-v"></i>
                        </button>
                    </div>
                    <div class="h-80 flex items-center justify-center">
                        <canvas id="questionTypeChart"></canvas>
                    </div>
                    <div class="grid grid-cols-2 gap-2 mt-4">
                        <div class="flex items-center">
                            <span class="w-3 h-3 rounded-full bg-primary mr-2"></span>
                            <span class="text-sm text-gray-600">单选题 (35%)</span>
                        </div>
                        <div class="flex items-center">
                            <span class="w-3 h-3 rounded-full bg-success mr-2"></span>
                            <span class="text-sm text-gray-600">多选题 (20%)</span>
                        </div>
                        <div class="flex items-center">
                            <span class="w-3 h-3 rounded-full bg-warning mr-2"></span>
                            <span class="text-sm text-gray-600">判断题 (15%)</span>
                        </div>
                        <div class="flex items-center">
                            <span class="w-3 h-3 rounded-full bg-danger mr-2"></span>
                            <span class="text-sm text-gray-600">填空题 (10%)</span>
                        </div>
                        <div class="flex items-center">
                            <span class="w-3 h-3 rounded-full bg-purple-500 mr-2"></span>
                            <span class="text-sm text-gray-600">解答题 (20%)</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 学科数据和最近活动 -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
                <!-- 各学科题目分布 -->
                <div class="bg-white rounded-lg shadow-sm p-5">
                    <div class="flex justify-between items-center mb-5">
                        <h3 class="font-semibold text-gray-800">学科题目分布</h3>
                        <button class="text-primary text-sm hover:underline">查看全部</button>
                    </div>
                    <div class="space-y-4" id="subject-distribution">
                        <!-- 学科分布将通过JavaScript动态加载 -->
                    </div>
                </div>

                <!-- 难度分布 -->
                <div class="bg-white rounded-lg shadow-sm p-5">
                    <div class="flex justify-between items-center mb-5">
                        <h3 class="font-semibold text-gray-800">题目难度分布</h3>
                        <button class="text-primary text-sm hover:underline">详情</button>
                    </div>
                    <div class="h-64">
                        <canvas id="difficultyChart"></canvas>
                    </div>
                    <div class="mt-4 grid grid-cols-3 gap-2 text-center">
                        <div class="p-2 bg-green-50 rounded">
                            <p class="text-xs text-gray-500">简单</p>
                            <p class="text-lg font-bold text-success">3,853</p>
                        </div>
                        <div class="p-2 bg-yellow-50 rounded">
                            <p class="text-xs text-gray-500">中等</p>
                            <p class="text-lg font-bold text-warning">5,138</p>
                        </div>
                        <div class="p-2 bg-red-50 rounded">
                            <p class="text-xs text-gray-500">困难</p>
                            <p class="text-lg font-bold text-danger">3,854</p>
                        </div>
                    </div>
                </div>

                <!-- 最近活动 -->
                <div class="bg-white rounded-lg shadow-sm p-5">
                    <div class="flex justify-between items-center mb-5">
                        <h3 class="font-semibold text-gray-800">最近活动</h3>
                        <button class="text-primary text-sm hover:underline">更多</button>
                    </div>
                    <div class="space-y-4 max-h-80 overflow-y-auto pr-2" id="recent-activities">
                        <!-- 最近活动将通过JavaScript动态加载 -->
                    </div>
                </div>
            </div>

            <!-- 最近更新的题目 -->
            <div class="bg-white rounded-lg shadow-sm p-5 mb-6">
                <div class="flex justify-between items-center mb-5">
                    <h3 class="font-semibold text-gray-800">最近更新的题目</h3>
                    <div class="flex items-center space-x-3">
                        <div class="relative">
                            <input type="text" placeholder="搜索题目..."
                                class="pl-9 pr-4 py-2 rounded-lg bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all w-48">
                            <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                        </div>
                        <button class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-colors">
                            <i class="fa fa-plus mr-1"></i> 添加题目
                        </button>
                    </div>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead>
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">题目ID</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">题目内容</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">学科</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">题型</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">难度</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">更新时间</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200" id="recent-questions-table">
                            <!-- 最近更新的题目将通过JavaScript动态加载 -->
                        </tbody>
                    </table>
                </div>
                <div class="flex justify-between items-center mt-5" id="pagination">
                    <!-- 分页信息将通过JavaScript动态加载 -->
                </div>
            </div>
        </main>

        <!-- 页脚 -->
        <footer class="bg-white border-t border-gray-200 py-4">
            <div class="container mx-auto px-4">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <div class="text-center md:text-left mb-4 md:mb-0">
                        <p class="text-sm text-gray-500">© 2025 睿途教育. 保留所有权利.</p>
                    </div>
                    <div class="flex space-x-6">
                        <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                            <i class="fa fa-question-circle mr-1"></i> 帮助中心
                        </a>
                        <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                            <i class="fa fa-file-text-o mr-1"></i> 使用条款
                        </a>
                        <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                            <i class="fa fa-shield mr-1"></i> 隐私政策
                        </a>
                    </div>
                </div>
            </div>
        </footer>
    </div>

    <script>
        // 全局变量存储图表实例
        let questionGrowthChart, questionTypeChart, difficultyChart;
        let dashboardData = null;

        // 加载JSON数据
        async function loadDashboardData() {
            try {
                console.log('开始加载JSON数据...');
                const response = await fetch('dashboard-data.json');
                console.log('响应状态:', response.status);
                
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                
                dashboardData = await response.json();
                console.log('数据加载成功:', dashboardData);
                return dashboardData;
            } catch (error) {
                console.error('加载数据失败:', error);
                return null;
            }
        }



        // 渲染统计卡片
        function renderStatisticsCards(data) {
            const container = document.getElementById('statistics-cards');
            const cardTitles = {
                totalQuestions: '总题目数',
                activeUsers: '活跃用户',
                totalPapers: '试卷总数',
                averageAccuracy: '平均正确率'
            };

            container.innerHTML = '';
            
            Object.entries(data.statistics).forEach(([key, stat]) => {
                const changeIcon = stat.changeType === 'increase' ? 'fa-arrow-up' : 'fa-arrow-down';
                const changeColor = stat.changeType === 'increase' ? 'text-success' : 'text-danger';
                const progressText = key === 'averageAccuracy' ? `目标值: ${stat.progress}%` : `目标完成度: ${stat.progress}%`;
                
                const card = `
                    <div class="stat-card border-l-4 border-${stat.color}">
                        <div class="flex justify-between items-start">
                            <div>
                                <p class="text-gray-500 text-sm">${cardTitles[key]}</p>
                                <h3 class="text-2xl font-bold mt-1">${key === 'averageAccuracy' ? stat.value + '%' : stat.value.toLocaleString()}</h3>
                                <p class="${changeColor} text-sm mt-2 flex items-center">
                                    <i class="fa ${changeIcon} mr-1"></i> ${stat.change}% <span class="text-gray-500 ml-1">较上月</span>
                                </p>
                            </div>
                            <div class="w-10 h-10 rounded-full bg-${stat.color}/10 flex items-center justify-center text-${stat.color}">
                                <i class="fa ${stat.icon}"></i>
                            </div>
                        </div>
                        <div class="mt-4">
                            <div class="progress-bar">
                                <div class="progress-value bg-${stat.color}" style="width: ${stat.progress}%"></div>
                            </div>
                            <p class="text-xs text-gray-500 mt-2">${progressText}</p>
                        </div>
                    </div>
                `;
                container.innerHTML += card;
            });
        }

        // 渲染学科分布
        function renderSubjectDistribution(data) {
            const container = document.getElementById('subject-distribution');
            container.innerHTML = '';
            
            data.subjectDistribution.forEach(subject => {
                const item = `
                    <div>
                        <div class="flex justify-between mb-1">
                            <span class="text-sm font-medium">${subject.name}</span>
                            <span class="text-sm text-gray-500">${subject.count.toLocaleString()} (${subject.percentage}%)</span>
                        </div>
                        <div class="progress-bar">
                            <div class="progress-value bg-${subject.color}" style="width: ${subject.percentage}%"></div>
                        </div>
                    </div>
                `;
                container.innerHTML += item;
            });
        }

        // 渲染最近活动
        function renderRecentActivities(data) {
            const container = document.getElementById('recent-activities');
            container.innerHTML = '';
            
            data.recentActivities.forEach(activity => {
                const item = `
                    <div class="flex">
                        <div class="mr-3 mt-1">
                            <div class="w-2 h-2 rounded-full bg-${activity.type}"></div>
                        </div>
                        <div>
                            <p class="text-sm"><span class="font-medium">${activity.user}</span> ${activity.action}</p>
                            <p class="text-xs text-gray-500 mt-1">${activity.time}</p>
                        </div>
                    </div>
                `;
                container.innerHTML += item;
            });
        }

        // 渲染最近更新的题目
        function renderRecentQuestions(data) {
            const container = document.getElementById('recent-questions-table');
            container.innerHTML = '';
            
            data.recentQuestions.forEach(question => {
                const typeBadgeClass = getTypeBadgeClass(question.type);
                const difficultyBadgeClass = getDifficultyBadgeClass(question.difficulty);
                
                const row = `
                    <tr class="hover:bg-gray-50 transition-colors">
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">#${question.id}</td>
                        <td class="px-6 py-4 text-sm text-gray-800 max-w-xs truncate">${question.content}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">${question.subject}</td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${typeBadgeClass}">${question.type}</span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${difficultyBadgeClass}">${question.difficulty}</span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${question.updateTime}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm">
                            <a href="#" class="text-primary hover:text-primary/80 mr-3">编辑</a>
                            <a href="#" class="text-danger hover:text-danger/80">删除</a>
                        </td>
                    </tr>
                `;
                container.innerHTML += row;
            });
        }

        // 渲染分页
        function renderPagination(data) {
            const container = document.getElementById('pagination');
            const pagination = data.pagination;
            
            const paginationHtml = `
                <p class="text-sm text-gray-500">显示 1 到 ${pagination.itemsPerPage} 条，共 ${pagination.totalItems.toLocaleString()} 条</p>
                <div class="flex space-x-1">
                    <button class="px-3 py-1 border border-gray-300 rounded-md text-gray-500 hover:bg-gray-50 disabled:opacity-50" ${pagination.currentPage === 1 ? 'disabled' : ''}>上一页</button>
                    <button class="px-3 py-1 border border-primary bg-primary text-white rounded-md">${pagination.currentPage}</button>
                    ${pagination.currentPage < pagination.totalPages ? `<button class="px-3 py-1 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">${pagination.currentPage + 1}</button>` : ''}
                    ${pagination.currentPage + 1 < pagination.totalPages ? `<button class="px-3 py-1 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">${pagination.currentPage + 2}</button>` : ''}
                    ${pagination.currentPage + 2 < pagination.totalPages ? `<button class="px-3 py-1 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">...</button>` : ''}
                    ${pagination.currentPage + 3 < pagination.totalPages ? `<button class="px-3 py-1 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">${pagination.totalPages}</button>` : ''}
                    <button class="px-3 py-1 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50" ${pagination.currentPage === pagination.totalPages ? 'disabled' : ''}>下一页</button>
                </div>
            `;
            container.innerHTML = paginationHtml;
        }

        // 获取题型徽章样式
        function getTypeBadgeClass(type) {
            const badgeClasses = {
                '单选题': 'bg-blue-100 text-blue-800',
                '多选题': 'bg-green-100 text-green-800',
                '判断题': 'bg-yellow-100 text-yellow-800',
                '填空题': 'bg-orange-100 text-orange-800',
                '解答题': 'bg-purple-100 text-purple-800'
            };
            return badgeClasses[type] || 'bg-gray-100 text-gray-800';
        }

        // 获取难度徽章样式
        function getDifficultyBadgeClass(difficulty) {
            const badgeClasses = {
                '简单': 'bg-green-100 text-green-800',
                '中等': 'bg-yellow-100 text-yellow-800',
                '困难': 'bg-red-100 text-red-800'
            };
            return badgeClasses[difficulty] || 'bg-gray-100 text-gray-800';
        }

        // 初始化图表
        function initializeCharts(data) {
            // 题目增长趋势图表
            const questionGrowthCtx = document.getElementById('questionGrowthChart').getContext('2d');
            questionGrowthChart = new Chart(questionGrowthCtx, {
                type: 'line',
                data: {
                    labels: data.charts.questionGrowth.labels,
                    datasets: data.charts.questionGrowth.datasets
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top',
                            labels: {
                                usePointStyle: true,
                                boxWidth: 6
                            }
                        },
                        tooltip: {
                            mode: 'index',
                            intersect: false,
                            backgroundColor: 'rgba(255, 255, 255, 0.9)',
                            titleColor: '#1F2937',
                            bodyColor: '#4B5563',
                            borderColor: 'rgba(209, 213, 219, 0.5)',
                            borderWidth: 1,
                            padding: 12,
                            boxPadding: 6,
                            usePointStyle: true
                        }
                    },
                    scales: {
                        x: {
                            grid: {
                                display: false
                            }
                        },
                        y: {
                            beginAtZero: true,
                            grid: {
                                color: 'rgba(209, 213, 219, 0.3)'
                            }
                        }
                    },
                    elements: {
                        point: {
                            radius: 3,
                            hoverRadius: 5
                        }
                    }
                }
            });

            // 题目类型分布图表
            const questionTypeCtx = document.getElementById('questionTypeChart').getContext('2d');
            questionTypeChart = new Chart(questionTypeCtx, {
                type: 'doughnut',
                data: {
                    labels: data.charts.questionType.labels,
                    datasets: [{
                        data: data.charts.questionType.data,
                        backgroundColor: data.charts.questionType.backgroundColor,
                        borderWidth: 0,
                        hoverOffset: 5
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    cutout: '70%',
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            backgroundColor: 'rgba(255, 255, 255, 0.9)',
                            titleColor: '#1F2937',
                            bodyColor: '#4B5563',
                            borderColor: 'rgba(209, 213, 219, 0.5)',
                            borderWidth: 1,
                            padding: 12,
                            boxPadding: 6,
                            usePointStyle: true,
                            callbacks: {
                                label: function(context) {
                                    const label = context.label || '';
                                    const value = context.raw || 0;
                                    return `${label}: ${value}%`;
                                }
                            }
                        }
                    }
                }
            });

            // 难度分布图表
            const difficultyCtx = document.getElementById('difficultyChart').getContext('2d');
            difficultyChart = new Chart(difficultyCtx, {
                type: 'bar',
                data: {
                    labels: data.charts.difficulty.labels,
                    datasets: [{
                        label: '题目数量',
                        data: data.charts.difficulty.data,
                        backgroundColor: data.charts.difficulty.backgroundColor,
                        borderRadius: 6,
                        barThickness: 40
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    indexAxis: 'y',
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            backgroundColor: 'rgba(255, 255, 255, 0.9)',
                            titleColor: '#1F2937',
                            bodyColor: '#4B5563',
                            borderColor: 'rgba(209, 213, 219, 0.5)',
                            borderWidth: 1,
                            padding: 12,
                            boxPadding: 6
                        }
                    },
                    scales: {
                        x: {
                            grid: {
                                display: false
                            }
                        },
                        y: {
                            grid: {
                                display: false
                            }
                        }
                    }
                }
            });
        }

        // 主初始化函数
        async function initializeDashboard() {
            try {
                console.log('开始初始化仪表盘...');
                const data = await loadDashboardData();
                
                if (data) {
                    console.log('开始渲染组件...');
                    
                    // 渲染所有组件
                    try {
                        renderStatisticsCards(data);
                        console.log('统计卡片渲染完成');
                    } catch (e) {
                        console.error('渲染统计卡片失败:', e);
                    }
                    
                    try {
                        renderSubjectDistribution(data);
                        console.log('学科分布渲染完成');
                    } catch (e) {
                        console.error('渲染学科分布失败:', e);
                    }
                    
                    try {
                        renderRecentActivities(data);
                        console.log('最近活动渲染完成');
                    } catch (e) {
                        console.error('渲染最近活动失败:', e);
                    }
                    
                    try {
                        renderRecentQuestions(data);
                        console.log('最近题目渲染完成');
                    } catch (e) {
                        console.error('渲染最近题目失败:', e);
                    }
                    
                    try {
                        renderPagination(data);
                        console.log('分页渲染完成');
                    } catch (e) {
                        console.error('渲染分页失败:', e);
                    }
                    
                    try {
                        initializeCharts(data);
                        console.log('图表初始化完成');
                    } catch (e) {
                        console.error('初始化图表失败:', e);
                    }
                    
                    console.log('仪表盘初始化完成！');
                } else {
                    console.error('无法加载仪表盘数据');
                    // 显示错误信息给用户
                    document.body.innerHTML = `
                        <div style="text-align: center; padding: 50px; font-family: Arial, sans-serif;">
                            <h2>数据加载失败</h2>
                            <p>无法加载仪表盘数据，请检查：</p>
                            <ul style="text-align: left; max-width: 400px; margin: 20px auto;">
                                <li>• 是否通过HTTP服务器访问页面（不要直接打开HTML文件）</li>
                                <li>• dashboard-data.json 文件是否存在</li>
                                <li>• 网络连接是否正常</li>
                            </ul>
                            <p>如果问题持续存在，请联系管理员。</p>
                            <button onclick="location.reload()" style="padding: 10px 20px; background: #3B82F6; color: white; border: none; border-radius: 5px; cursor: pointer; margin-right: 10px;">重新加载</button>
                            <button onclick="window.open('dashboard-data.json', '_blank')" style="padding: 10px 20px; background: #10B981; color: white; border: none; border-radius: 5px; cursor: pointer;">查看JSON文件</button>
                        </div>
                    `;
                }
            } catch (error) {
                console.error('初始化仪表盘失败:', error);
                // 显示错误信息给用户
                document.body.innerHTML = `
                    <div style="text-align: center; padding: 50px; font-family: Arial, sans-serif;">
                        <h2>页面加载失败</h2>
                        <p>初始化仪表盘时发生错误：${error.message}</p>
                        <button onclick="location.reload()" style="padding: 10px 20px; background: #3B82F6; color: white; border: none; border-radius: 5px; cursor: pointer;">重新加载</button>
                    </div>
                `;
            }
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', initializeDashboard);

        // 侧边栏切换（如果需要）
        document.getElementById('sidebar-toggle')?.addEventListener('click', function() {
            // 这里可以添加侧边栏切换逻辑
            alert('侧边栏切换功能可以在这里实现');
        });
    </script>
</body>

</html>